<template>
  <view class="container">
    <view
      class="list_cell m_t b_b"
      @click="navTo('/pages/mine/info')"
      hover-class="cell_hover"
      :hover-stay-time="50"
    >
      <text class="cell_tit">个人信息</text>
      <text class="cuIcon-right lg text-gray"></text>
    </view>
    
    <view
      class="list_cell b_b" 
      @click="navTo('/pages/account/account')"
      hover-class="cell_hover"
      :hover-stay-time="50"
    >
      <text class="cell_tit">账号安全</text>
       <text class="cuIcon-right lg text-gray"></text>
    </view>
	<view
	  class="list_cell" 
	  @click="navTo('/pages/set/about')"
	  hover-class="cell_hover"
	  :hover-stay-time="50"
	  style="margin-top: 10rpx;"
	>
	  <text class="cell_tit">关于读道</text>
	   <text class="cuIcon-right lg text-gray"></text>
	</view>
	
	
	
  
    <view
      class="log_out_btn flex_row_center_center"
      @click="loginOutDialog(true)"
    >
      退出登录
    </view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        type="input"
        :title="'提示'"
        :content="'确定要退出登录吗'"
        :duration="2000"
        @close="loginOutDialog(false)"
        @confirm="confirmLoginOut"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import { mapMutations, mapState } from 'vuex'
export default {
  components: {
    uniPopupDialog
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState(['hasLogin', 'userCenterData','userInfo']),
  },
  onLoad() {
   
  },
  methods: {
    ...mapMutations(['login', 'logout', 'setUserCenterData', ]),
    navTo(url) {
		this.$tab.navigateTo(url)
    },
    //退出登录
    confirmLoginOut() {
      this.$request({
        url: 'v3/frontLogin/oauth/logout',
        method: 'POST',
        data: {
          refresh_token: this.userInfo.refresh_token
        }
      })
        .then((res) => {
          this.logout()
          this.$tab.reLaunch('/pages/mine/index')
        })
        .catch((e) => {})
    },
    //退出登录提示
    loginOutDialog(type) {
      if (type) {
        this.$refs.popup.open()
      } else {
        this.$refs.popup.close()
      }
    },
   
  }
}
</script>

<style lang="scss">
page {
  background:#f2f2f2;
  width: 750rpx;
  margin: 0 auto;
}
.list_cell {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  line-height: 100rpx;
  height: 100rpx;
  position: relative;
  background: #fff;
  justify-content: center;
  &.cell_hover {
    background: #fafafa;
  }
  &.b_b:after {
    left: 20rpx;
  }
  &.m_t {
    margin-top: 20rpx;
  }
  .cell_more {
    color: #f2f2f2;
    font-size: 18rpx;
    margin-left: 10rpx;
  }
  .cell_tit {
    flex: 1;
    font-size: 28rpx;
    color: #2d2d2d;
    margin-right: 10rpx;
  }
  .size_cache {
    font-size: 28rpx;
    color: red;
  }
}
.log_out_btn {
  position: fixed;
  width: 668rpx;
  margin: 0 41rpx;
  left: 50%;
  transform: translateX(-375rpx);
  background-color: #fff;
  bottom: 80rpx;
  z-index: 95;
  font-size: 34rpx;
  color:#84e8ff;
  height: 88rpx;
  border: 1px solid #84e8ff;
  border-radius: 44px;
  letter-spacing: 1rpx;
}
</style>
